/**
 * Karin on 20170720
 * 年检支付后，用户地址列表：里面地址组件
 */
import React, { Component } from 'react'
import Style from './index.scss'
import SendCxytjMessage from '../../utils/sendCxytjMessage'

export default class Address extends Component {
	constructor(props) {
		super(props);

		this.state = {
			selectIndex: this.props.fn,
		}
	}

	/* 
	 * 事件
	 */
	getType(i) {
		if (this.props.ifGray) return false
		this.props.onType(i)
		localStorage.setItem("addressList_action", this.props.index); //存储列表勾选的位置
		console.log("保存当前状态")
	}

	editAddress(url) {

		!this.props.ifGray&&localStorage.setItem("addressList_action", this.props.index); //存储列表勾选的位置
		SendCxytjMessage.sendMessage({ eventId: 'insepection_editaddress' });

		sessionStorage.setItem('addressId_i', this.props.addressId)  //编辑地址用
		this.context.router.push(url);
	}

	/**
	 * 组件
	 */
	//index:序列； addr地址； name姓名； phone电话； fn当前选中第几条；ifGray：true 表示 置灰，false 表示不置灰，可选
	render() {
		let { index, addressId, payTypeData, addr, name, phone, fn, ifGray, orderId } = this.props
		//	console.log('=============' + fn + '-,' + index, '=============', this.props)


		return (
			<div className={ifGray ? Style.addressList + ' ' + Style.addressListGray : Style.addressList} >

				<div onClick={() => this.getType(index)} className={Style.imgURl}>

					<div className={Style.check}>
						{
							fn == index && !ifGray ? <img src="./images/choice.png" alt="" /> : ''
						}
					</div>

					<div className={Style.fullName}>
						<p className={Style.nameAndNumber}><span>{name}</span><span>{phone}</span></p>
						<p className={Style.detailedAddress}><span>{addr}</span></p>
					</div>
				</div>
				<div onClick={() => this.editAddress('addressEdit/' + orderId + '/' + payTypeData + '/' + addressId)} className={Style.editAddress}>
					<img src="./images/editAddress.png" alt="" />
				</div>

			</div>

		)
	}
}

Address.contextTypes = {
	router: React.PropTypes.object.isRequired
};

Address.defaultProps = {
}

